<template>
  <view class="xlm-switch" @tap="toggleSwitch">
    <view 
      class="switch-track"
      :class="{ 'switch-track--active': modelValue }"
    >
      <view 
        class="switch-thumb"
        :class="{ 'switch-thumb--active': modelValue }"
      />
    </view>
  </view>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: false
  }
})

// 定义事件
const emit = defineEmits(['update:modelValue', 'change'])
// 点击处理
const toggleSwitch = () => {
  console.log(1231313);
  if (props.disabled) return
  
  const newValue = !props.modelValue
  emit('update:modelValue', newValue);
  emit('change', newValue)
}
</script>
<style lang="scss" scoped>
  @import './index.scss';
</style>
